<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab{
            width: 33%;
            border: solid 1px greenyellow;
            border-collapse: collapse;
            margin:5px auto;
        }

        .tab td{
            border: solid 1px greenyellow;
            text-align: center;
        }
    </style>
</head>
<body>
 <div id="app">
    <h2 align="center">{{info}}</h2>
    <!-- <pre>{{books}}</pre> -->
    <div>
        <!-- {{books[1].f_title}} -->
        <!-- <img :src="path + books[2].f_image" alt="" style="width:200px;height: 200px;"> -->
    </div>
 

 <table class="tab">
    <tr>
        <td>书号</td>
        <td>书名</td>
        <td>作者</td>
        <td>类型</td>
        <td>价格</td>
        <td>封面</td>
    </tr>
    <tr v-for="bk in books">
        <td>{{bk.f_id}}</td>
        <td>{{bk.f_title}}</td>
        <td>{{bk.f_author}}</td>
        <td>{{bk.f_type}}</td>
        <td>{{bk.f_price}}</td>
        <td><img :src="path + bk.f_image" alt="" style="width: 100px;height: 100px;"></td>
    </tr>
 </table>
</div>

<script src="js/vue.js"></script>
<script src="js/axios.js"></script>

<script>
    let vm =new Vue({
        el:'#app',
        data:{
            info:'图书信息管理',
            books:[],//图书数组，保存数据库中的图书记录
            path:'http://localhost:44355/content/img/',
        },
        //自定义方法
        methods:{
            f1(){
                let _this = this //保存对Vue实例的引用

                //发出ajax请求，获取服务器中图书表的记录
                axios.get('http://localhost:44355/Book/Index')
                .then(function(rs){
                    console.log(rs)

                    // console.log('111')
                    _this.books=rs.data //将获取的图书保存到数据
                })
            },
        },
        //生命周期：类似webfrom 的 xx_load()
        created(){
            this.f1()
        },
    })
</script>


</body>


</html>